import React from "react";
import style from "./style.module.scss";
import message from "../../assets/images/icon/common resource/hdpi/common_nav_message_black_n.png";
import userUrl from "../../assets/images/user.jpg";
import { useAppSelector } from "../../app/hooks";
import { useNavigate } from "react-router-dom";
import { WDImage } from "../wd-image";

interface PropsType {
  showSearch: boolean;
  title?: string;
}

export const WDHeader: React.FC<PropsType> = ({ showSearch, title }) => {
  const headPic = useAppSelector((state) => state.user.userInfo.headPic);
  const isLogin = useAppSelector((state) => state.user.isLogin);
  const navigate = useNavigate();
  const handleClickLeft = () => {
    if (isLogin) {
      navigate("/my");
    } else {
      navigate("/login");
    }
  };
  const handleFocus = () => {
    navigate('/home/search')
  }
  return (
    <div className={style.header}>
      <div className={style.left} onClick={() => handleClickLeft()}>
        <WDImage src={headPic ? headPic : userUrl} alt="" />
      </div>
      <div className={style.middle}>
        {showSearch ? (
          <input type="text" className={style.input} placeholder="请搜索内容" onFocus={() => handleFocus()}/>
        ) : (
          <div className={style.text}>
            <b>{title || ""}</b>
          </div>
        )}
      </div>
      <div className={style.right}>
        <WDImage src={message} alt="" />
      </div>
    </div>
  );
};
